<template>
	<div class="competition-content">
		<van-sticky>
			<van-nav-bar title="报名信息填写" @click-left="onClickLeft">
				<template #left><van-icon name="arrow-left" size="18" color="#333" /></template>
			</van-nav-bar>
		</van-sticky>

		<img :src="singUpBg" style="width: 100%; height: 100%" />
		<div class="form-box" :style="{
			backgroundImage: `url(${formBoxBg})`,
		}">
			<van-form @submit="onSubmit">
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>姓名</label>
						<van-field v-model="formData.name" name="name" placeholder="请输入姓名" border="{false}" class="form-input"
							:rules="[{ required: true, message: '请输入姓名' }]" />
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>性别</label>
						<el-select v-model="formData.sex" placeholder="请选择性别" class="el-select-custom form-input">
							<el-option v-for="item in genderOptions" :key="item.value" :label="item.text" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>手机号码</label>
						<van-field v-model="formData.mobile" name="mobile" placeholder="请输入 11 位手机号" maxlength="11" border="{false}"
							class="form-input" :rules="[
								{ required: true, message: '请输入手机号' },
								{ pattern: /^1\d{10}$/, message: '手机号格式错误' },
							]" />
					</div>
				</div>
				<div class="code-row">
					<div class="form-row">
						<div class="form-row-main">
							<label class="form-label"><span class="star">*</span>验证码</label>
							<van-field v-model="formData.code" name="code" placeholder="请输入验证码" border="{false}" class="form-input"
								:rules="[{ required: true, message: '请输入验证码' }]">
							</van-field>
						</div>
					</div>
					<div class="code-btn" @click="onGetCode">{{ codeText }}</div>
				</div>

				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>电子邮箱</label>
						<van-field v-model="formData.email" name="email" placeholder="请输入正确的电子邮箱" border="{false}"
							class="form-input" :rules="[
								{ required: true, message: '请输入邮箱' },
								{ pattern: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+\w{2,4}$/, message: '邮箱格式错误' },
							]" />
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>学校/企业名称</label>
						<van-field v-model="formData.org_name" name="org_name" placeholder="请输入（自由职业者可填无）" border="{false}"
							class="form-input" :rules="[{ required: true, message: '请输入学校/企业名称' }]" />
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>有效证件</label>
						<el-select v-model="formData.id_type" placeholder="请选择证件类型" class="el-select-custom form-input">
							<el-option v-for="item in idTypeOptions" :key="item.value" :label="item.text" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>证件号码</label>
						<van-field v-model="formData.id_card_code" name="id_card_code" placeholder="请输入有效证件号码" border="{false}"
							class="form-input" :rules="[{ required: true, message: '请输入证件号码' }]" />
					</div>
				</div>
				<div class="id-photo-label">
					<span class="star">*</span>
					证件照片
					<span class="tips">（护照上传 1 面即可）</span>
				</div>
				<div class="id-photo-upload">
					<div class="id-photo-upload-item">
						<div class="id-photo-upload-item-content">
							<van-uploader v-model="formData.id_card_front" :max-count="1" :after-read="onAfterRead" :preview-options="{
								closeable: true,
							}" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.zip,.rar,.7z" :max-size="0.5 * 1024 * 1024" @oversize="onOversize">
								<template #default>
									<div class="uploader-placeholder">
										<img :src="iconXiangJi" class="uploader-icon" />
										<div class="uploader-tips">证件正面</div>
									</div>
								</template>
							</van-uploader>
						</div>


					</div>
					<div class="id-photo-upload-item">
						<div class="id-photo-upload-item-content">
							<van-uploader v-model="formData.id_card_back" :max-count="1" :after-read="onAfterRead" :preview-options="{
								closeable: true,
							}" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.zip,.rar,.7z" :max-size="0.5 * 1024 * 1024" @oversize="onOversize">
								<template #default>
									<div class="uploader-placeholder">
										<img :src="iconXiangJi" class="uploader-icon" />
										<div class="uploader-tips">证件反面</div>
									</div>
								</template>
							</van-uploader>
						</div>

					</div>

				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>紧急联系人</label>
						<van-field v-model="formData.contact_name" name="contact_name" placeholder="请输入紧急联系人名字" border="{false}"
							class="form-input" :rules="[{ required: true, message: '请输入紧急联系人名字' }]" />
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>与联系人关系</label>
						<van-field v-model="formData.contact_relationship" name="contact_relationship" placeholder="请输入与紧急联系人关系"
							border="{false}" class="form-input" :rules="[{ required: true, message: '请输入与紧急联系人关系' }]" />
					</div>
				</div>
				<div class="form-row">
					<div class="form-row-main">
						<label class="form-label"><span class="star">*</span>联系人号码</label>
						<van-field v-model="formData.contact_mobile" name="contact_mobile" placeholder="请输入紧急联系人电话号码"
							border="{false}" class="form-input" :rules="[
								{ required: true, message: '请输入紧急联系人号码' },
								{ pattern: /^1\\d{10}$/, message: '手机号格式错误' },
							]" />
					</div>
				</div>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">提交</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElSelect, ElOption } from "element-plus";
import { showToast } from 'vant';
import api from "@/utils/request";
const router = useRouter();
import singUpBg from "/images/competition/singup-bg.png";
import formBoxBg from "/images/competition/form-box-bg.png";
import iconXiangJi from "/images/competition/icon-xiangji.png";

const formData = ref({
	name: "",
	sex: "",
	mobile: "",
	code: "",
	email: "",
	org_name: "",
	id_type: "",
	id_card_code: "",
	id_card_front: [{ url: 'https://testapi.3dshome.com/uploads/20250629/img20250629150249155.jpeg' }],
	id_card_back: [],
	contact_name: "",
	contact_relationship: "",
	contact_mobile: "",
});

const genderOptions = [
	{ text: "男", value: "男" },
	{ text: "女", value: "女" },
];
const idTypeOptions = [
	{ text: "身份证", value: "身份证" },
	{ text: "护照", value: "护照" },
	{ text: "港澳通行证", value: "港澳通行证" },
	{ text: "台胞证", value: "台胞证" },
];

// 验证码倒计时
const countDown = ref(0);

const codeText = computed(() => {
	return countDown.value ? `${countDown.value}秒后重试` : "获取验证码";
})

// 获取验证码
function onGetCode () {
	if (countDown.value) {
		showToast("已发送，请勿重复点击")
		return;
	};
	if (!formData.value.mobile) {
		showToast("请输入手机号");
		return;
	}
	startCountDown();
}

// 验证码倒计时
function startCountDown () {
	api.getVerificationCode({ mobile: formData.value.mobile }).then((res) => {
		showToast("验证码已发送");
		countDown.value = 60;
		const timer = setInterval(() => {
			if (countDown.value <= 0) {
				clearInterval(timer);
				countDown.value = 0
			} else {
				countDown.value--;

			}
		}, 1000)
	}).catch(err => { })

}
function onAfterRead (file) {
	file.status = "uploading";
	file.message = "上传中...";

	api.uploadImage({
		base64: file.content,
	}).then(res => {
		if (res.code == 200) {
			file.url = res.data;
			file.status = "done";
			file.message = res.msg;
		} else {
			file.status = "failed";
			file.message = res.msg;
		}
	});
}

function onOversize (file) {
	showToast("照片大小不能超过500KB");
	return false;
}
function onSubmit (values) {
	console.log("提交表单", values, formData.value);
	alert("提交成功");
}
function onClickLeft () {
	router.back();
}
</script>

<style>
body {
	background-color: #f8f8f8;
}

/* 覆盖全局 Vant Toast 样式 */
.van-toast {
	background: #323233 !important;
	color: #fff !important;
	font-size: 14px;
}
</style>
<style lang="scss" scoped>
.competition-content {
	max-width: 768px;
	margin: 0 auto;
	min-height: 100vh;
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);

	.form-box {
		position: relative;
		z-index: 10;
		top: -10px;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 8px 8px 0px 0px;
		min-height: 600px;
		overflow: hidden;
		background-size: 100% 100%;

		.van-form {
			.van-cell {
				background-color: transparent;
			}
		}
	}
}

.code-row {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 16px;

	.form-row {
		margin-bottom: 0;
	}

	.code-btn {
		margin-left: 16px;
		flex: 1 1 40%;
		padding: 0 8px;
		text-align: center;
		white-space: nowrap;
		font-size: 14px;
		height: 48px;
		line-height: 48px;
		border-radius: 4px;
		background: linear-gradient(135deg, rgba(214, 136, 249, 1) 0%, rgba(102, 244, 253, 1) 39.52%, rgba(89, 97, 247, 1) 100%);
	}
}

.form-row {
	background: #fff;
	border-radius: 4px;
	margin-bottom: 16px;
	padding: 0 12px 0 12px;
	box-sizing: border-box;

	.form-row-main {
		display: flex;
		align-items: center;
		min-height: 48px;
		width: 100%;

		.form-label {
			min-width: 68px;
			color: #333;
			font-size: 14px;
			font-weight: 500;
			margin-right: 8px;
			display: flex;
			align-items: center;

			.star {
				color: #65f2fc;
				margin-right: 2px;
				font-size: 16px;
			}
		}

		.form-input {
			flex: 1;
			background: transparent;
			border: none;
			box-shadow: none;
			font-size: 14px;
			margin-left: 8px;
			padding: 0;
			overflow: visible;

			:deep(.van-cell__value) {
				.van-field__error-message {
					position: absolute;
					top: calc(100% + 8px);
				}

			}
		}

		.el-select-custom {
			width: 100%;
			background: transparent;

			:deep(.el-select__selected-item) {
				color: #000;
			}

			:deep(.el-select__wrapper) {
				background: transparent;
				box-shadow: none;
				border: none;
				padding-left: 0;
			}

			.el-input__inner {
				font-size: 14px;
			}
		}

	}

}

.id-photo-label {
	margin: 16px 0 8px 8px;
	color: #000;
	font-size: 14px;
	font-weight: 500;

	.star {
		color: #65f2fc;
		margin-right: 2px;
		font-size: 18px;
	}

	.tips {
		color: #a6a6a6;
		font-size: 12px;
	}
}

.id-photo-upload {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;

	.id-photo-upload-item {
		position: relative;
		width: 50%;
		height: 0;
		padding-top: 25%;
		margin-right: 10px;

		.id-photo-upload-item-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		:deep(.van-uploader) {
			width: 100%;
			height: 100%;

			.van-uploader__input-wrapper {
				width: 100%;
			}

			.uploader-placeholder {
				width: 100%;
				height: 100%;
				background: #f7f8fa;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #e5e5e5;
				font-size: 12px;
				border-radius: 8px;

				.uploader-icon {
					width: 16px;
					height: 16px;
				}

				.uploader-tips {
					margin-top: 4px;
				}
			}

			.van-uploader__wrapper {
				width: 100%;
				height: 100%;

				.van-uploader__file,
				.van-uploader__preview {
					margin: 0;
					width: 100%;
					height: 100%;

					.van-uploader__preview-image {
						width: 100%;
						height: 100%;
						border-radius: 4px;
						overflow: hidden;
					}

					.van-uploader__preview-delete {
						width: 20px;
						height: 20px;

						.van-uploader__preview-delete-icon {
							font-size: 12px;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}

				}
			}
		}


	}
}
</style>
